/*
 * $Id: _main.scss 331 2012-12-02 21:57:37Z bobcat $
 * Basic site-wide css, applies to all pages. Group, listing,
 * and product css rules should go into their respective files.
 * Mobile styles are written here, and overwritten in the media
 * query file, _queries.scss.
 */

// imports
@import 'compass'; // for standard mixins
@import 'normalize'; // htnml5 boilerplate css reset
@import 'base'; // html5 boilerplate opinionated styles

// fonts
$font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

// colors
$banner-color: #26517C;
$border-color: #ddd;
$text-color-dark: #292929;
$text-color-lite: white;
$link-color: $banner-color;
$link-hover-color: #FFA500;
$link-hover-color-dark: $link-hover-color - #111;
$select-background-color: #FFA500;
$select-text-color: $text-color-lite;
$touch-nav-background: $banner-color + #0f0f0f;
$transparency: .4;

// dimensions
$border-radius: .7em;
$border-radius-big: 1em;
$border-width: 2px; //.063em; // 1/16 = .0625em
$font-size: 1em;
$inline-list-padding: 1em;
$line-height: 1.4em;
$link-active-padding: .1em;
$wrapper-width: 90%;
$padding: 1em;
$padding-button-y: .3em;
$padding-button-x: 1em;
$margin: $padding;
$center-col-width: 100%;

// mixins
// columnize will set the width for elements depending on num-cols,
// for example 4 cols = 25% width.
@mixin columnize($num-cols, $extra-padding: 0, $shrinkage: 0, $first: 0) {
  @if $extra-padding != 0 {
    padding-left: $extra-padding;
    padding-right: $extra-padding;
  }
  @if $first != 0 {
    @include box-sizing(border-box);
    display: inline-block;
    vertical-align: top;
  }
  width: 100% / $num-cols - $shrinkage;
}

// a nice, clean button style. Will generate all the rules for hover, active,
// etc. based on colors for the background and text. Used for things like
// account buttons in the header and add to cart links on the product pages
@mixin clean-gray($base-color, $text-color: $text-color-dark) {
  background-color: $base-color;
  @include background-image(linear-gradient($base-color, $base-color - #111));
  @include border-radius($border-radius-big);
  border: $border-width solid $base-color - #333;
  border-bottom: $border-width solid $base-color - #444;
  color: $text-color;
  display: inline-block;
  padding: $padding-button-y 0;
  position: relative;
  text-align: center;
  text-shadow: 0 $border-width 0 $base-color - #111;

  &:hover {
    background-color: $base-color - #111;
    @include background-image(linear-gradient($base-color - #111, $base-color - #333));
    border: $border-width solid $base-color - #444;
    border-bottom: $border-width solid $base-color - #666;
    cursor: pointer;
    color: $text-color;
    text-shadow: 0 $border-width 0 $base-color - #222;
  }

  &:active {
    background-color: $base-color - #222;
    @include box-shadow(inset 0 0 $border-width*3 $border-width*2 $base-color - #383838, 0 $border-width 0 0 $base-color - #333);
    border: $border-width solid $base-color - #555;
    border-bottom: $border-width solid $base-color - #777;
    top: $link-active-padding;
  }
}

// the css required for the flexible three column layout. I've tried to keep
// this clean, but it's still pretty hairy. Oh, css.... This layout was inspired
// by http://www.alistapart.com/articles/holygrail/ so check there if you can't
// understand.
@mixin holy-grail($left-col-width: 13em, $right-col-width: 18em, $col-padding: 1em, $num-cols: 3) {
  $left-col-fullwidth: $left-col-width + $col-padding;

  #col-container {
    @include clearfix;
    padding-left: $left-col-fullwidth;  // LC fullwidth

    .column {
      //@include box-sizing("border-box");
      position: relative;
      float: left;
    }
  }

  #center-col {
    width: 100%;
    padding-left: $col-padding;  // CC padding
  }

  #left-col {
    width: $left-col-width;
    padding-right: $col-padding;  // LC padding
    margin-left: -100%; // pull it into place
  }

  #right-col {
    padding-left: $col-padding;  // RC padding
  }

  @if $num-cols == 3 {
    $center-col-padding: 2 * $col-padding;
    $right-col-fullwidth: $right-col-width + $col-padding; //  convenient for calculations

    #col-container  {
      padding-right: $right-col-fullwidth + $center-col-padding;  // RC fullwidth + CC padding
    }

    #center-col {
      padding-right: $col-padding;   // CC padding
    }

    #left-col {
      right: $left-col-fullwidth + $center-col-padding;  // LC fullwidth + CC padding
    }

    #right-col {
      width: $right-col-width;                                      // RC width
      margin-right: -($right-col-fullwidth + $center-col-padding);  // RC fullwidth + CC padding
    }

    * html #left {
      left: $right-col-fullwidth;  // RC fullwidth (IE fix)
    }
  } @else {
    $center-col-padding: $col-padding;

    #col-container {
      padding-right: $center-col-padding;   // CC padding
    }

    #left-col {
      right: $left-col-fullwidth + $center-col-padding;  // LC fullwidth + CC padding
    }

    #right-col { // match #center-col for 2-col layout
      width: 100%;  // for 2 column layout
    }
  }
}

// elements selectors
html, body {
  min-width: 20em;
  width: 100%;
  min-height: 100%;
}

html {
  overflow-y: scroll;
}

body {
  color: $text-color-dark;
  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;
  text-rendering: optimizeLegibility;
}

a {
  color: $link-color;
  position: relative;
  text-decoration: none;

  &:hover {
    color: $link-hover-color;
  }

  &:active {
    top: $link-active-padding;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 0;
}

h2, h3, h5 {
  border-bottom: 1px solid $border-color;
}

h1 {
  display: none; // logo provides visual, h1 provides semantic information for search engines
}

h2 {
  font-size: xx-large;
  padding: $padding/2 0;
  margin: $margin * 1.5 0;
  text-align: center;
}

h3 {
  font-size: x-large;
  margin-top: 0;
  margin-bottom: $margin/2;
  line-height: 1.4em;
}

h5 {
  font-size: 1em;
  text-align: left;
  margin-bottom: .5em;
}

ul, ol {
  padding: 0;
  margin: 0;
}

header, footer {
  background-color: $banner-color;
  font-size: larger;

  nav {
    @include clearfix;
  }

  .wrap {
    width: 100%;
  }
}

header a, footer ul {
  display: none; // hide aux. information for mobile
}

header button, footer a {
  @include clean-gray(#fff); // button styles
  font-family: $font-family;
  @include border-radius(0);
  width: 50%;
  margin: 0;
}

header {
  button, button:hover {
    border-top: none;
    border-left: none;

    &#cart {
      border-right: none;
    }
  }
}

footer {
  @include background-image(linear-gradient($banner-color - #111 0%, $banner-color 5%));
  padding-top: 0;
  padding-bottom: $padding;
  text-align: center;

  li, span {
    color: $text-color-lite;
  }

  li, a {
    display: inline-block;
  }

  a {
    @include box-sizing(border-box);
  }

  nav {
    margin-bottom: 1em;
  }

  span {
    font-size: small;
    opacity: $transparency;
  }

  a, a:hover {
    border-left: none;

    &#sitemap {
      border-right: none;
    }
  }
}

p {
  margin: 0;
  font-size: .9em;
}

// pseduo-classes
::-moz-selection {
  background: $select-background-color;
  color: $select-text-color;
  text-shadow: none;
}

::selection {
  background: $select-background-color;
  color: $select-text-color;
  text-shadow: none;
}

// classes
.wrap {
  @include clearfix;
  margin: 0 auto;
  width: $wrapper-width;
  max-width: 85em;
}

.small {
  font-size: .85em;
}

.anchor {
  display: none;
}

.icon {
  background-size: .9em;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 1.3em;
}

.column {
  padding-top: 0;               // trim the excess top space
  padding-bottom: $padding * 2; // and buff the bottom

  & > div, & > article {
    margin-bottom: 2em;

    &:last-child {
      margin: 0;
    }
  }
}

.breadcrumbs {
  font-size: 1.2em;
  padding-bottom: .25em;
  border-bottom: 1px solid $border-color;

  span:after {
    content: "\2192";
    margin: 0 .4em;
    font-size: .75em;
    position: relative;
    top: -.15em;
  }
}

.ratio-container {
	position: relative;
	height: 0;

  iframe {
    border: none;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  }
}

.description {
  div {
    overflow: auto;
    max-height: 18em;
  }
}

.info {
  display: none;
  padding: .5em;
  position: fixed;
  opacity: .8;
  background: chartreuse;
  @include border-radius(1em);
}

.call-us, .promo {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1em;
  padding: .3em;
}

.promo {
  margin-bottom: 2em;
}

.extphone {
  display: block;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;

  .icon {
    background-image: url('../../img/icons/dark/64px/64_phone.png');
    background-size: .8em;
    padding-left: .9em;
  }
}

.add-to-cart td {
  height: 3em;
  vertical-align: middle;
  position: relative;

  button {
    @include clean-gray(#4682B4, #fff);
    padding: .5em 1.5em;
  }

  span {
    background-repeat: no-repeat;
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-left: .5em;
    vertical-align: middle;
  }
}

.tab {
  margin-bottom: 2em;
  text-align: center;
  width: 100%;

  & > h4 {
    border-bottom: $border-width solid $border-color;
    font-size: 1.2em;
    width: 100%;
    padding: .2em 0;
    background-color: #eee;
    margin-bottom: .5em;
  }
}

.pdf {
  background-image: url('../../img/icons/pdficon_small.png');
}

// modernizr detections
.js {
  // if we have javascript, we are going to programatically hide/show
  // content that applies only to specific variations
  .aux-info {
    display: none;
  }
}

.no-js {
  .total {
    display: none;
  }

  #left-col .drop > ul > li:hover {
    & > a {
      @include border-bottom-left-radius(0);
      @include border-bottom-right-radius(0);
    }

    ul {
      display: block;
    }

    &:last-child li:last-child a {
      @include border-bottom-left-radius($border-radius);
      @include border-bottom-right-radius($border-radius);
    }
  }

  h5 {
    margin-top: 1em;
  }
}

// ids
#cot_tl_fixed {
  z-index: 10;
}

#home {
  background-image: url('../../img/icons/light/24px/24_home.png');
}

#contact {
  background-image: url('../../img/icons/light/24px/24_email.png');
}

#ordering {
  background-image: url('../../img/icons/light/24px/24_info.png');
}

#privacy {
  background-image: url('../../img/icons/light/24px/24_lock.png');
}

#cart {
  float: right;

  .icon {
    background-image: url('../../img/icons/dark/24px/24_cart.png');
  }
}

#login, #logout, #resellers {
  float: left;
}

#leave {
  width: 100%;
  border-top: none;
  border-left: none;
  border-right: none;
}

#sitemap {
  float: right;
}

#login .icon {
  background-image: url('../../img/icons/dark/24px/24_users.png');
}

#logout .icon {
  background-image: url('../../img/icons/dark/24px/24_logout.png');
}

#banner {
  text-align: center;
  width: 100%;

  td {
    vertical-align: middle;
    display: block; // stack on top of eachother
  }
}

#logo {
  background-image: url('../../img/logo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 98%;
  min-height: 7em;
  position: relative;

  a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
  }
}

#content {
  @include background-image(linear-gradient(#eee 0%, #fff 1%, #fff 99%, #eee 100%));
  padding-bottom: $padding * 2;
  min-height: 53.5em;

  a:hover {
    color: $link-hover-color-dark;
  }

  a.button:hover {
    color: #FFFFFF;
  }
}

#center-col {
  h2 {
    display: block;
    line-height: 1.4;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 1em;
    padding: 0;
  }
}

#left-col, #right-col {
  @include box-sizing(border-box);
}

#left-col {
  text-align: center; // mainly for headers

  h2 {
    margin-top: -1em; // trim some excess space
  }

  nav {
    text-align: left;

    & > ul > li { // top-level li elements
      border-bottom: 1px solid white;

      a { // all a elements
        display: block;
        padding: .75em 1em;
        color: $text-color-lite;
        font-size: large;

        &:hover, &.active {
          color: $link-hover-color;
        }
      }

      & > a { // top level a elements have dark background
        background: $touch-nav-background + #111;

        &:hover, &.active {
          background: $touch-nav-background;
        }
      }

      & > ul { // sub-lists
        display: none; // hidden until :hover

        li a { // sub-level a elements have lighter background
          padding-left: 2em;  // push sublists to the right to show "nesting"
          font-size: .95em;    // smaller font
          background: $touch-nav-background;

          &:hover {
            background: $touch-nav-background - #111;
          }
        }
      }

      &:hover, &.active {
        & > a {
          color: $link-hover-color; // hover changes parent color
          background: $touch-nav-background; // and background
        }
      }

      &:last-child {
        border-bottom: none;
      }

      &:first-child > a {
        @include border-top-left-radius($border-radius);
        @include border-top-right-radius($border-radius);
      }

      &:last-child {
        & > a {
          @include border-bottom-left-radius($border-radius);
          @include border-bottom-right-radius($border-radius);
        }

        & > a.active {
          @include border-bottom-left-radius(0);
          @include border-bottom-right-radius(0);

          & + ul li:last-child a {
            @include border-bottom-left-radius($border-radius);
            @include border-bottom-right-radius($border-radius);
          }
        }
      }
    } // end #left-col nav > ul > li
  } // end #left-col nav

  .drop > ul > li {
    &.active {
      & > a {
        @include border-bottom-left-radius(0);
        @include border-bottom-right-radius(0);
      }
    }

    &:last-child.active {
      li:last-child a {
        @include border-bottom-left-radius($border-radius);
        @include border-bottom-right-radius($border-radius);
      }
    }
  }
} // end #left-col

#right-col .ratio-container {
  padding-bottom: 56.25%;
	margin-bottom: $margin/2;
	overflow: hidden;
}

#search {
  @include border-radius($border-radius-big);
  background: url('../../img/icons/dark/24px/24_search.png');
  background-position: .5em center;
  background-repeat: no-repeat;
  background-size: .9em;
  border: 2px solid $border-color;
  font-size: x-large;
  font-weight: lighter;
  outline: none;
  padding: .35em 0 .3em 1.7em;
  width: 84%;
}

#search:focus {
  border-color: $border-color - #333;
}

// media queries
@import 'queries';